<template>
	<view class="order-info">
		<!-- 顶部状态栏 -->
		<view class="status-bar">
			<view class="table-info">
				<text class="table-name">{{ orderInfo.boardName }}</text>
				<text class="table-status">{{ getStatusText(orderInfo.boardStatus) }}</text>
			</view>
			<view class="order-time">
				<text>下单时间：{{ formatTime(orderInfo.placeOrderTime) }}</text>
				<text>已用时：{{ calculateDuration(orderInfo.placeOrderTime) }}</text>
			</view>
		</view>

		<!-- 订单操作栏 -->
		<view class="action-bar">
			<view class="action-btn add-dish" @click="handleAddDish">
				<text class="icon">🍽️</text>
				<text>加菜</text>
			</view>
			<view class="action-btn change-table" @click="handleChangeTable">
				<text class="icon">🔄</text>
				<text>换桌</text>
			</view>
			<view class="action-btn print-bill" @click="handlePrintBill">
				<text class="icon">🧾</text>
				<text>打印小票</text>
			</view>
		</view>

		<!-- 订单详情 -->
		<scroll-view scroll-y class="order-details" :style="{ paddingBottom: '120rpx' }">
			<!-- 订单基本信息 -->
			<view class="info-section">
				<view class="section-title">订单信息</view>
				<view class="info-content">
					<view class="info-item">
						<text class="label">订单号：</text>
						<text class="value">{{ orderInfo.orderId }}</text>
					</view>
					<view class="info-item">
						<text class="label">备注：</text>
						<text class="value">{{ orderInfo.remark || '无' }}</text>
					</view>
				</view>
			</view>

			<!-- 已点菜品列表 -->
			<view class="dishes-section">
				<view class="section-title">
					<text>已点菜品</text>
					<text class="dish-count">({{ orderInfo.dishes.length }}道)</text>
				</view>
				<view class="dishes-list">
					<view 
						v-for="dish in orderInfo.dishes" 
						:key="dish.dishId"
						class="dish-item"
					>
						<image class="dish-image" :src="dish.image" mode="aspectFill"/>
						<view class="dish-info">
							<text class="dish-name">{{ dish.name }}</text>
							<text class="dish-price">¥{{ dish.price }}</text>
						</view>
						<view class="dish-actions">
							<text class="quantity">× {{ dish.quantity }}</text>
							<button class="remove-btn" @click="removeDish(dish)">退菜</button>
						</view>
					</view>
				</view>
			</view>

			<!-- 账单信息 -->
			<view class="bill-section">
				<view class="section-title">账单信息</view>
				<view class="bill-content">
					<view class="bill-item">
						<text>消费金额</text>
						<text>¥{{ orderInfo.totalAmount }}</text>
					</view>
					<view class="bill-item">
						<text>优惠金额</text>
						<text>-¥{{ orderInfo.discountAmount }}</text>
					</view>
					<view class="bill-item total">
						<text>应付金额</text>
						<text>¥{{ orderInfo.payableAmount }}</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="total-amount">
				<text>应付金额</text>
				<text class="amount">¥{{ orderInfo.payableAmount }}</text>
			</view>
			<view class="operate-buttons">
				<button class="btn cancel-btn" @click="handleCancel">取消订单</button>
				<button class="btn checkout-btn" @click="handleCheckout">立即结账</button>
			</view>
		</view>

		<!-- 支付选择弹窗 -->
		<uni-popup ref="paymentPopup" type="bottom" :show="paymentPopupVisible" @change="paymentPopupChange">
			<view class="payment-popup">
				<view class="popup-header">
					<text class="close-btn" @click="closePaymentPopup">×</text>
					<text class="password-btn">使用密码</text>
				</view>
				<view class="amount-section">
					<text class="merchant-name">商家名称</text>
					<view class="currency-amount-wrapper">
						<text class="currency">¥</text>
						<text class="amount">{{ orderInfo.payableAmount ? orderInfo.payableAmount.toFixed(2) : '0.00' }}</text>
					</view>
				</view>
				<view class="divider-line"></view>
				<view class="payment-method-section">
					<view class="method-header">
						<view class="label">付款方式</view>
						<view class="change-method">
							<text>更改</text>
							<text class="arrow">></text>
						</view>
					</view>
					<view class="method-item">
						<image src="/static/tabbar/零钱通.png" class="method-icon"></image>
						<view class="method-details">
							<text class="method-name">零钱通</text>
							<text class="method-provider">由腾安公司提供货币基金销售服务</text>
						</view>
						<text class="checkmark">✔</text>
					</view>
				</view>
				<view class="popup-footer">
					<button class="pay-btn" @click="confirmPayment">支付</button>
				</view>
			</view>
		</uni-popup>

		<!-- 密码输入弹窗（底部滑出，严格还原图片） -->
		<uni-popup ref="passwordPopup" type="bottom" :show="passwordPopupVisible" @change="passwordPopupChange">
			<view class="pay-password-popup">
				<view class="popup-header">
					<text class="close-btn" @click="closePasswordPopup">×</text>
					<text class="face-btn">使用面容</text>
				</view>
				<view class="popup-amount">
					<text class="merchant">某某商家</text>
					<view class="currency-amount-row">
						<text class="currency">¥</text>
						<text class="amount">{{ orderInfo.payableAmount ? orderInfo.payableAmount.toFixed(2) : '0.00' }}</text>
					</view>
				</view>
				<view class="popup-method">
					<view class="method-label">付款方式</view>
					<view class="method-change">更改<text class="arrow">∨</text></view>
					<view class="method-item">
						<image src="/static/tabbar/建设银行.png" class="method-icon"></image>
						<view class="method-info">
							<text class="method-name">招商银行储蓄卡</text>
							<text class="method-desc">尾号1234</text>
						</view>
						<text class="checkmark">✔</text>
					</view>
				</view>
				<view class="popup-password">
					<view class="password-box">
						<view v-for="i in 6" :key="i" class="pwd-cell">
							<view v-if="password.length >= i" class="dot"></view>
						</view>
					</view>
				</view>
				<view class="popup-keyboard">
					<view class="keyboard-row" v-for="(row, rowIndex) in keyboardRows" :key="rowIndex">
						<view
							v-for="(key, colIndex) in row"
							:key="key || 'empty' + colIndex"
							class="key-btn"
							:class="{
								del: key === 'del',
								empty: !key
							}"
							@click="key && handleKeyboardInput(key)"
						>
							<template v-if="key === 'del'">
								<text class="del-icon">⌫</text>
							</template>
							<template v-else>
								{{ key }}
							</template>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 支付成功全屏弹窗 -->
		<uni-popup ref="successPopup" type="center" :show="successPopupVisible" :mask-click="false">
			<view class="pay-success-popup">
				<view class="success-top-bar">
					<image class="success-icon" src="/static/tabbar/微信支付.png" mode="widthFix" />
					<text class="success-text">支付成功</text>
				</view>
				<view class="success-amount-block">
					<view class="success-merchant">某某商家</view>
					<view class="success-amount-row">
						<text class="currency">¥</text>
						<text class="amount">{{ orderInfo.payableAmount ? orderInfo.payableAmount.toFixed(2) : '0.00' }}</text>
					</view>
				</view>
				<view class="success-bottom-block">
					<div class="success-btn" @click="closeSuccessPopup">完成</div>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, onMounted, nextTick, onUnmounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { orderApi, dishApi } from '../../utils/api'

// 订单信息
const orderInfo = ref({
	orderId: '',
	boardId: '',
	boardName: '',
	boardStatus: '',
	placeOrderTime: '',
	remark: '',
	totalAmount: 0,
	discountAmount: 0,
	payableAmount: 0,
	dishes: []
})

// 支付弹窗相关
const paymentPopup = ref(null)
const paymentPopupVisible = ref(false)

// 密码弹窗相关
const passwordPopup = ref(null)
const passwordPopupVisible = ref(false)
const password = ref('')

// 自定义数字键盘布局
const keyboardRows = [
	['1', '2', '3'],
	['4', '5', '6'],
	['7', '8', '9'],
	['', '0', 'del']
]

// 支付弹窗状态变化处理
const paymentPopupChange = (e) => {
	paymentPopupVisible.value = e.show
}

// 关闭支付弹窗
const closePaymentPopup = () => {
	paymentPopup.value?.close()
}

// 密码弹窗状态变化处理
const passwordPopupChange = (e) => {
	passwordPopupVisible.value = e.show
	if (!e.show) {
		password.value = ''
	}
}

// 关闭密码弹窗
const closePasswordPopup = () => {
	passwordPopup.value?.close()
}

// 处理自定义键盘输入
const handleKeyboardInput = (key) => {
	if (key === 'del') {
		if (password.value.length > 0) password.value = password.value.slice(0, -1)
	} else if (key && password.value.length < 6) {
		password.value += key
		if (password.value.length === 6) {
			verifyPassword()
		}
	}
}

// 验证密码
const verifyPassword = async () => {
	try {
		uni.showLoading({ title: '验证中...' })
		setTimeout(() => {
			uni.hideLoading()
			closePasswordPopup()
			closePaymentPopup()
			successPopupVisible.value = true
			nextTick(() => {
				successPopup.value?.open('center')
			})
		}, 1000)
	} catch (error) {
		uni.showToast({ title: '密码验证失败', icon: 'none' })
	} finally {
		uni.hideLoading()
	}
}

// 获取订单信息
const fetchOrderInfo = (order) => {
	if (!order) return
	
	console.log('接收到的订单数据:', order)
	console.log('订单中的菜品数据:', order.items)
	
	orderInfo.value = {
		orderId: order.orderId,
		boardId: order.boardId,
		boardName: order.boardName,
		boardStatus: order.boardStatus || 'UNINHABITED',
		placeOrderTime: order.placeOrderTime,
		remark: order.remark,
		totalAmount: order.totalAmount,
		discountAmount: order.discountAmount,
		payableAmount: order.payableAmount,
		dishes: order.items?.map(item => {
			console.log('处理菜品项:', item)
			return {
				dishId: item.orderItem.dishId,
				name: item.dish.dishName,
				price: item.dish.price,
				quantity: item.orderItem.quantity,
				image: item.dish.dishImage
			}
		}) || []
	}
	
	console.log('处理后的订单数据:', orderInfo.value)
	console.log('处理后的菜品列表:', orderInfo.value.dishes)
}

// 格式化时间
const formatTime = (time) => {
	if (!time) return ''
	const date = new Date(time)
	const year = date.getFullYear()
	const month = String(date.getMonth() + 1).padStart(2, '0')
	const day = String(date.getDate()).padStart(2, '0')
	const hours = String(date.getHours()).padStart(2, '0')
	const minutes = String(date.getMinutes()).padStart(2, '0')
	return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 计算用餐时长
const calculateDuration = (startTime) => {
	if (!startTime) return '0分钟'
	
	const start = new Date(startTime)
	const now = new Date()
	const diffMinutes = Math.floor((now.getTime() - start.getTime()) / (1000 * 60))
	
	if (diffMinutes < 60) {
		return `${diffMinutes}分钟`
	} else {
		const hours = Math.floor(diffMinutes / 60)
		const minutes = diffMinutes % 60
		return `${hours}小时${minutes}分钟`
	}
}

// 获取状态文本
const getStatusText = (status) => {
	const statusMap = {
		'UNINHABITED': '空闲',
		'BOOKING': '已预订',
		'REPAST': '就餐中',
		'DISABLE': '停用'
	}
	console.log('当前状态值:', status)
	return statusMap[status] || '未知'
}

// 处理加菜
const handleAddDish = () => {
	uni.navigateTo({
		url: `add-dish?orderId=${orderInfo.value.orderId}`
	})
}

// 退掉指定菜品
const removeDish = (dish) => {
	uni.showModal({
		title: '退菜确认',
		content: `确定要退掉 ${dish.name} 吗？`,
		success: async (res) => {
			if (res.confirm) {
				try {
					uni.showLoading({
						title: '处理中...'
					})
					
					const result = await dishApi.returnDish(
						orderInfo.value.orderId,
						dish.dishId
					)
					
					if (result.code === 200) {
						uni.showToast({
							title: '退菜成功',
							icon: 'success',
							duration: 1500
						})
						// 延迟返回，让用户看到成功提示
						setTimeout(() => {
							uni.reLaunch({
								url: '/src/pages/order/index'
							})
						}, 1500)
					} else {
						uni.showToast({
							title: result.msg || '退菜失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('退菜失败:', error)
					uni.showToast({
						title: '退菜失败，请重试',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			}
		}
	})
}

// 处理换桌
const handleChangeTable = () => {
	uni.navigateTo({
		url: `/src/pages/order/change-table?boardName=${orderInfo.value.boardName}&boardId=${orderInfo.value.boardId}&orderId=${orderInfo.value.orderId}`
	})
}

// 监听换桌事件
uni.$on('tableChanged', (data) => {
	if (data.orderId === orderInfo.value.orderId) {
		// 更新订单信息
		orderInfo.value.boardId = data.newBoard.boardId
		orderInfo.value.boardName = data.newBoard.boardName
		orderInfo.value.boardStatus = data.newBoard.boardStatus
		
		uni.showToast({
			title: '换桌成功',
			icon: 'success'
		})
	}
})

// 页面卸载时移除事件监听
onUnmounted(() => {
	uni.$off('tableChanged')
})

// 处理打印小票
const handlePrintBill = () => {
	// 处理打印小票逻辑
}

// 处理取消订单
const handleCancel = () => {
	uni.showModal({
		title: '取消订单',
		content: '确定要取消该订单吗？',
		success: async (res) => {
			if (res.confirm) {
				try {
					uni.showLoading({
						title: '处理中...'
					})
					
					const result = await orderApi.updateOrderStatus(orderInfo.value.orderId, 2)
					
					if (result.code === 200) {
						uni.showToast({
							title: '取消成功',
							icon: 'success',
							duration: 1500
						})
						// 延迟返回，让用户看到成功提示
						setTimeout(() => {
							uni.reLaunch({
								url: '/src/pages/order/index'
							})
						}, 1500)
					} else {
						uni.showToast({
							title: result.msg || '取消失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('取消订单失败:', error)
					uni.showToast({
						title: '取消失败，请重试',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			}
		}
	})
}

// 处理结账
const handleCheckout = () => {
	paymentPopupVisible.value = true
	nextTick(() => {
		paymentPopup.value?.open('bottom')
	})
}

// 支付弹窗内点击支付，弹出密码输入弹窗
const confirmPayment = () => {
	closePaymentPopup();
	nextTick(() => {
		passwordPopupVisible.value = true;
		passwordPopup.value?.open('bottom');
	});
}

// 支付成功全屏弹窗
const successPopup = ref(null)
const successPopupVisible = ref(false)

const closeSuccessPopup = () => {
	successPopupVisible.value = false
	successPopup.value?.close()
	// 可选：返回订单页
	// uni.reLaunch({ url: '/src/pages/order/index' })
}

// 页面加载时获取订单信息
onLoad((options) => {
	if (options.order) {
		try {
			const order = JSON.parse(options.order)
			fetchOrderInfo(order)
		} catch (error) {
			console.error('解析订单数据失败:', error)
			uni.showToast({
				title: '获取订单信息失败',
				icon: 'none'
			})
		}
	}
})
</script>

<style lang="scss" scoped>
.order-info {
	min-height: 100vh;
	background: #f5f5f5;
	display: flex;
	flex-direction: column;

	.status-bar {
		background: #ffffff;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;

		.table-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.table-name {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
			}

			.table-status {
				font-size: 28rpx;
				color: #c70209;
				background: rgba(199, 2, 9, 0.1);
				padding: 6rpx 16rpx;
				border-radius: 20rpx;
			}
		}

		.order-time {
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			color: #666;
		}
	}

	.action-bar {
		display: flex;
		padding: 20rpx;
		background: #ffffff;
		gap: 20rpx;

		.action-btn {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 10rpx;
			padding: 20rpx;
			background: #f8f8f8;
			border-radius: 12rpx;
			transition: all 0.3s;

			&:active {
				transform: scale(0.98);
			}

			&.add-note {
				.icon {
					color: #2196F3;
				}
			}

			.icon {
				font-size: 40rpx;
			}

			text {
				font-size: 24rpx;
				color: #333;
			}
		}
	}

	.order-details {
		flex: 1;
		padding: 20rpx;

		.info-section, .dishes-section, .bill-section {
			background: #ffffff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;

				.dish-count {
					font-size: 24rpx;
					color: #999;
					margin-left: 10rpx;
				}
			}
		}

		.info-content {
			.info-item {
				display: flex;
				margin-bottom: 16rpx;

				.label {
					width: 160rpx;
					color: #666;
					font-size: 28rpx;
				}

				.value {
					flex: 1;
					color: #333;
					font-size: 28rpx;
				}
			}
		}

		.dishes-list {
			.dish-item {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: none;
				}

				.dish-image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}

				.dish-info {
					flex: 1;

					.dish-name {
						font-size: 28rpx;
						color: #333;
						margin-bottom: 10rpx;
					}

					.dish-price {
						font-size: 26rpx;
						color: #c70209;
					}
				}

				.dish-actions {
					display: flex;
					align-items: center;
					gap: 20rpx;

					.quantity {
						font-size: 28rpx;
						color: #666;
					}

					.remove-btn {
						font-size: 24rpx;
						color: #ff4d4f;
						background: #fff1f0;
						border: none;
						padding: 8rpx 20rpx;
						border-radius: 24rpx;
					}
				}
			}
		}

		.bill-content {
			.bill-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 16rpx;
				font-size: 28rpx;
				color: #666;

				&.total {
					margin-top: 20rpx;
					padding-top: 20rpx;
					border-top: 1rpx solid #eee;
					color: #333;
					font-weight: 600;
				}
			}
		}
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #ffffff;
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #eee;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.total-amount {
			text {
				font-size: 28rpx;
				color: #666;
			}

			.amount {
				font-size: 36rpx;
				font-weight: 600;
				color: #c70209;
				margin-left: 20rpx;
			}
		}

		.operate-buttons {
			display: flex;
			gap: 20rpx;

			.btn {
				padding: 0 40rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				font-size: 28rpx;

				&.cancel-btn {
					background: #f5f5f5;
					color: #666;
				}

				&.checkout-btn {
					background: #c70209;
					color: #fff;
				}
			}
		}
	}

	// 支付弹窗样式
	.payment-popup {
		background-color: #ffffff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		position: relative;
		bottom: -33px;
		padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iPhoneX 底部安全区 */
		padding-bottom: env(safe-area-inset-bottom); /* 兼容 iPhoneX 底部安全区 */
		z-index: 999; /* 确保弹窗在最上层 */

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 30rpx 20rpx;

			.close-btn {
				font-size: 40px;
				color: #999;
			}

			.password-btn {
				font-size: 28rpx;
				color: #687597;
			}
		}

		.amount-section {
			display: flex;
			flex-direction: column; /* 保持垂直堆叠：商家名称在上方，金额在下方 */
			justify-content: center;
			align-items: center; /* 整体居中 */
			padding: 10rpx 0; /* 调整垂直内边距 */

			.merchant-name {
				font-size: 28rpx;
				color: #888;
				margin-bottom: 20rpx;
			}

			.currency-amount-wrapper {
				display: flex;
				align-items: flex-end; /* 确保 ¥ 和金额的底部对齐 */
			}

			.currency {
				font-size: 48rpx;
				font-weight: bold;
				color: #333;
				position: relative; /* 允许使用 top 属性进行微调 */
				top: -35rpx; /* 将 ¥ 符号向上微移 */
			}

			.amount {
				font-size: 80rpx;
				font-weight: bold;
				color: #333;
				margin-left: 10rpx;
			}
		}

		.divider-line {
			height: 1rpx;
			background-color: #eee;
			margin: 20rpx 0;
		}

		.payment-method-section {
			padding: 0 30rpx; /* 调整左右内边距 */
			margin-bottom: 40rpx; /* 调整底部间距 */

			.method-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx; /* 调整与支付方式项的间距 */

				.label {
					font-size: 26rpx;
					color: #999;
				}

				.change-method {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #999;

					.arrow {
						margin-left: 10rpx;
						font-weight: bold;
					}
				}
			}

			.method-item {
				display: flex;
				align-items: center;
				background: #FFF8E6; /* 调整为更接近图片的米色背景 */
				border-radius: 12rpx;
				padding: 40rpx 30rpx;
				position: relative;

				.method-icon {
					width: 25rpx;
					height: 25rpx;
					margin-right: 20rpx;
					position: relative;
					top: -7px;
				}

				.method-details {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}

				.method-name {
					font-size: 26rpx;
					color: #333;
					font-weight: 500; /* 调整字体粗细 */
					margin-bottom: 5rpx;
					color: #888;
					margin-bottom: 10px;
				}

				.method-provider {
					font-size: 22rpx;
					color: #888;
				}

				.checkmark {
					font-size: 36rpx;
					color: #07c160;
					margin-left: 20rpx;
					position: relative;
					left: -10px;
				}
			}
		}

		.popup-footer {
			padding: 20rpx 30rpx; /* 调整内边距 */

			.pay-btn {
				background-color: #07c160;
				color: #ffffff;
				font-size: 32rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 20rpx;
				width: 50%;
				margin-top: 20px;
				margin-bottom: 20px;
			}
		}
	}

	// 密码输入弹窗样式
	.pay-password-popup {
		background: #fff;
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0 -8rpx 32rpx rgba(0,0,0,0.08);
		position: relative;
		bottom: -33px;
		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15rpx 32rpx 0 32rpx;
			.close-btn {
				font-size: 40px;
				color: #333;
			}
			.face-btn {
				font-size: 28rpx;
				color: #576b95;
			}
		}
		.popup-amount {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 16rpx;
			.merchant {
				font-size: 28rpx;
				color: #888;
				margin-bottom: 8rpx;
			}
			.currency-amount-row {
				display: flex;
				align-items: baseline;
				justify-content: center;
				.currency {
					font-size: 22px;
					font-weight: 600;
					color: #222;
					margin-right: 2px;
					position: relative;
					top: -2px;
				}
				.amount {
					font-size: 40px;
					font-weight: 600;
					color: #222;
					line-height: 1;
				}
			}
		}
		.popup-method {
			margin: 0 32rpx 24rpx 32rpx;
			.method-label {
				font-size: 24rpx;
				color: #999;
				margin-bottom: 8rpx;
			}
			.method-change {
				position: absolute;
				right: 48rpx;
				top: 0;
				font-size: 24rpx;
				color: #999;
				.arrow { margin-left: 4rpx; }
			}
			.method-item {
				display: flex;
				align-items: center;
				background: #EAF3FC;
				border-radius: 16rpx;
				padding: 37rpx 20rpx;
				margin-top: 25rpx;
				.method-icon {
					width: 50rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
				.method-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					.method-name {
						font-size: 28rpx;
						color: #333;
					}
					.method-desc {
						font-size: 22rpx;
						color: #888;
					}
				}
				.checkmark {
					font-size: 36rpx;
					color: #07c160;
					margin-left: 12rpx;
				}
			}
			position: relative;
		}
		.popup-password {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 32rpx 0 0 0;
			.password-box {
				display: flex;
				gap: 16rpx;
				.pwd-cell {
					width: 74rpx;
					height: 74rpx;
					border-radius: 8rpx;
					background: #F2F2F2;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 10px 0px;
					.dot {
						width: 16rpx;
						height: 16rpx;
						background: #222;
						border-radius: 50%;
					}
				}
			}
		}
		.popup-keyboard {
			background: #EDEDED;
			padding-bottom: env(safe-area-inset-bottom);
			margin-top: 10px;
			border-top: 1px solid #EDEDED;
			.keyboard-row {
				display: flex;
				width: 100%;
				.key-btn {
					flex: 1;
					height: 55px;
					background: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28px;
					color: #222;
					border-right: 1px solid #e5e5e5;
					border-bottom: 1px solid #e5e5e5;
					box-sizing: border-box;
					border-radius: 0;
					&.del {
						background: #EDEDED;
						color: #222;
					}
					&.empty {
						background: #EDEDED;
						border-right: none;
						border-bottom: none;
					}
				}
				.key-btn:last-child {
					border-right: none;
				}
			}
			.keyboard-row:last-child .key-btn {
				border-bottom: none;
			}
		}
	}

	// 支付成功全屏弹窗样式
	.pay-success-popup {
		position: fixed;
		left: 0; right: 0; top: 0; bottom: 0;
		width: 100vw; height: 100vh;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		z-index: 9999;
		.success-top-bar {
			margin-top: 25px;
			margin-bottom: 50px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.success-icon {
				width: 20px;
				height: 20px;
				margin-bottom: 0;
			}
			.success-text {
				color: #07c160;
				font-size: 15px;
				font-weight: 500;
				margin-left: 8px;
				margin-bottom: 0;
			}
		}
		.success-amount-block {
			margin-top: 16px;
			display: flex;
			flex-direction: column;
			align-items: center;
			.success-merchant {
				color: #888;
				font-size: 15px;
				margin-bottom: 10px;
			}
			.success-amount-row {
				display: flex;
				align-items: baseline;
				justify-content: center;
				.currency {
					font-size: 30px;
					font-weight: 600;
					color: #222;
					margin-right: 2px;
					position: relative;
					top: -9px;
				}
				.amount {
					font-size: 40px;
					font-weight: 600;
					color: #222;
					line-height: 1;
				}
			}
		}
		.success-progress {
			width: 80vw;
			margin: 32px 0 48px 0;
			display: flex;
			justify-content: center;
			.progress-bar {
				width: 100%;
				height: 6px;
				background: #f5f5f5;
				border-radius: 3px;
				overflow: hidden;
				.progress-inner {
					width: 30px;
					height: 100%;
					background: #fa5151;
					border-radius: 3px;
				}
			}
		}
		.success-bottom-block {
			width: 100vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			bottom: 60px;
			left: 0;
			.success-btn {
				position: relative;
				top: -40px;
				width: 40vw;
				height: 44px;
				background: #f5f5f5;
				color: #222;
				font-size: 15px;
				border-radius: 5px;
				border: none;
				margin: 0 auto;
				text-align: center;
				line-height: 44px;
			}
		}
	}
}
</style>
